<template>

    <div style="padding:20px">
        <a-form >
            <a-form-item labal="需求">
                <a-input v-model:value.trim="message" type="textarea" :rows="10"></a-input>
            </a-form-item>

            <a-form-item>
                <a-button @click="handleSend" type="primary">发送
                </a-button>
            </a-form-item>
            <a-form-item>
                <div v-html="html"></div>
            </a-form-item>
        </a-form>
    </div>

</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import MarkdownIt from 'markdown-it'
const message = ref<string>('')
const chatResponse = ref<string>('')
const md = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: true
});
const html = computed(() => {
    return md.render(chatResponse.value)
})
const system_promopt = `
你是一位专业的前端工程师，根据需求开发功能
###技能
1、使用typescript编程语言
2、使用vue 3.5.13框架，使用选项式API***<script setup lang="ts">***
3、vite构建工具
4、使用antd vue 4.2.6组件库
5、api调用和类型定义不要重复写了，所有的接口调用定义和类型定义都已写好，位置在src/api/services/index.ts,src/api/services/types.d.ts
###编程规范
1、文件名和文件夹统一使用小写，中间使用***-***拼接，例如:user/user-list.vue
2、新增，修改等操作使用a-modal实现，并把表单独立成组件，使用一个变量控制a-modal的显示、标题、id,data等，例如:const dialogEditor = ref<{open:boolean,title:string,id:string,data:any}>({open:false,title:'',id:''})
3、枚举使用自定义的组件<EnumSelect v-model="form.type" name="" />实现
4、上传图片使用自定义组件<UploadImage v-model="form.attachments" />实现
5、antd的组件在模板中使用小写，例如:a-input,a-button等
###工具
1、read_from_file 读取文件
2、write_to_file 写入文件
3、replace_in_file 修改存在文件
4、delete_file 删除文件
5、list_file 列出文件
6、execute_command 执行命令
###工具使用
1. 在进行编辑之前，评估你更改的范围，并决定使用哪个工具。  
2. 对于有针对性的修改，请使用 replace_in_file 工具，并精心编写 lineNumber(行号)和newContent(这一行的新内容)。如果你需要进行多项更改，可以在一个 replace_in_file 调用中堆叠多个行。  
3. 对于大规模重构或初始文件创建，请依赖 write_to_file 工具。  
4. 一旦文件通过 write_to_file 或 replace_in_file 被编辑，系统将向你提供修改后文件的最终状态。请将此更新后的内容作为后续所有 SEARCH/REPLACE 操作的参考点，因为它反映了任何自动格式化或用户手动应用的更改。

通过在 write_to_file 和 replace_in_file 之间做出深思熟虑的选择，你可以使文件编辑过程更加顺畅、安全和高效。


###系统环境
操作系统:windows 11
shell: ms-dos
代码目录：D:\\WORKS\\01demo\\new-abp\\ui
`
const handleSend = async function () {
    const headers = new Headers()
    headers.append('Content-Type', 'application/json')
    const body = JSON.stringify({
        message:message.value,
        system:system_promopt
    })
    const response = await fetch('api/AbpFundation/sample/chat', {
        method: 'POST',
        body: body,
        headers: headers
    })
    if (!response) {
        return;
    }
    if (!response.ok) {
        return;
    }
    if (!response.body) {
        return
    }
    const reader = response.body.getReader()
    const decoder = new TextDecoder('utf-8')

    while (true) {
        const { done, value } = await reader.read()
        if (done) {
            break
        }
        const chunk = decoder.decode(value, { stream: true })
        //    console.log(chunk)
        //const item  =JSON.parse(chunk)
        chatResponse.value += chunk;
    }
}
</script>
